<script setup>
import { watch, computed, onMounted, ref, reactive } from "vue";
import {
  getAllTeamMessagesByUid,
  modifyTeamMsg,
  isPass,
  dismissTeam,
  modifyTeamInfo,
  deleTeamMember,
} from "@/api/teamUp";
import { getUsernameById } from "@/api/user";
import { ElMessage } from "element-plus";
import { NO_CONTENT, SUCCESS } from "@/core/constants/HttpStatus";

//查找本人参与的所有队伍
const loadPage = async () => {
  try {
    const res = await getAllTeamMessagesByUid();
    console.log(res);
    const { code, data, msg } = res.data;
    if (code == SUCCESS) {
      myTeamList.value = data;
    } else {
      throw new error(msg);
    }
  } catch (error) {
    ElMessage.error(error.message || "查找队伍失败");
  }
};

let myTeamList = ref([]); //用户参与的所有队伍列表
let currentTpIndex = ref(0); //当前选择队伍的索引，默认队伍1

function getTeamInfo(property) {
  if (myTeamList.value.length > 0) {
    return myTeamList.value[currentTpIndex.value][property];
  } else {
    return null;
  }
}
//当前选择队伍的信息
let team = computed(() => {
  return getTeamInfo("team");
});
//当前选择队伍的组成信息
let members = computed(() => {
  return getTeamInfo("members");
});
//当前选择队伍中我的身份
let memberType = computed(() => {
  return getTeamInfo("memberType");
});
//我的真实姓名
let urealname = computed(() => {
  return getTeamInfo("urealname");
});
//当前选择队伍的申请信息列表
let registrationList = computed(() => {
  return getTeamInfo("registrationList");
});

//判断用户身份，按钮是否可点击
const isReadOnly = computed(() => {
  if (memberType.value === "0" || memberType.value === "1") {
    return false;
  } else {
    return true;
  }
});

/**
 * 队伍申请
 */
const table = ref(false); //是否显示申请详情
let registrantionDetails = ref(); //当前队伍的申请信息
const getRegistration = (index) => {
  table.value = true;
  registrantionDetails.value = registrationList.value[index];
};
//通过或拒绝队伍申请
const isPassOrNot = async (riId, flag) => {
  try {
    const res = await isPass({
      id: riId,
      flag: flag,
    });
    console.log(res);
    const { code, msg } = res.data;
    if (code == SUCCESS) {
      if (msg == "通过申请成功" || msg == "拒绝申请成功") {
        ElMessage.success(msg);
        loadPage();
      } else {
        ElMessage.error(msg);
      }
    } else {
      ElMessage.error(msg);
    }
  } catch (error) {
    ElMessage.error(error.message || "查找队伍失败");
  }
};

/**
 * 队伍信息
 */
const tmsgIsReadOnly = ref(true);

const teamFormRef = ref(null);
const teamForm = reactive({
  tpId: "", //团队ID
  tpTeamName: "", //团队名称
  tpProjectName: "", //赛事名称
  tpRegistrationDeadline: "", //截止招募时间
  tpTeacherNumber: "", //教师人数
  tpNeedStudentNumber: "", //学生人数
  tpContact: "", //联系方式
  tpTeamIntro: "", //队伍简介
  tpAbilityNeed: "", //能力需求
});
watch(team, (newTeam) => {
  teamForm.tpId = newTeam.tpId;
  teamForm.tpTeamName = newTeam.tpTeamName;
  teamForm.tpProjectName = newTeam.tpProjectName;
  teamForm.tpRegistrationDeadline = newTeam.tpRegistrationDeadline;
  teamForm.tpTeacherNumber = newTeam.tpTeacherNumber;
  teamForm.tpNeedStudentNumber = newTeam.tpNeedStudentNumber;
  teamForm.tpContact = newTeam.tpContact;
  teamForm.tpTeamIntro = newTeam.tpTeamIntro;
  teamForm.tpAbilityNeed = newTeam.tpAbilityNeed;
});
//表单验证规则
const teamMsgRules = {
  tpId: [{ required: true, message: "请勿修改团队ID", trigger: "blur" }],
  tpTeamName: [
    { required: true, message: "团队名称不能为空", trigger: "blur" },
  ],
  tpProjectName: [
    { required: true, message: "请勿修改赛事名称", trigger: "blur" },
  ],
  tpRegistrationDeadline: [
    { required: true, message: "截止时间不能为空", trigger: "blur" },
  ],
  tpContact: [{ required: true, message: "联系方式不能为空", trigger: "blur" }],
};

//修改按钮：使表单能够编辑
const updateTeamMsgForm = () => {
  console.log(memberType);
  if (memberType.value === "0" || memberType.value === "1") {
    tmsgIsReadOnly.value = false;
  } else {
    ElMessage.error("仅队长与指导老师可修改");
  }
};
//保存按钮：提交表单内容
const commitTeamMsgForm = async () => {
  await teamFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        let tpTeamIntro = String(teamForm.tpTeamIntro).replaceAll(
          /\n/g,
          "<br />"
        );
        let abilityNeed = String(teamForm.tpAbilityNeed).replaceAll(
          /\n/g,
          "<br />"
        );
        const res = await modifyTeamMsg({
          tpId: teamForm.tpId,
          tpTeamName: teamForm.tpTeamName,
          tpProjectName: teamForm.tpProjectName,
          tpRegistrationDeadline: teamForm.tpRegistrationDeadline,
          tpTeacherNumber: teamForm.tpTeacherNumber,
          tpNeedStudentNumber: teamForm.tpNeedStudentNumber,
          tpContact: teamForm.tpContact,
          tpTeamIntro: tpTeamIntro,
          tpAbilityNeed: abilityNeed,
        });
        console.log(res);
        const { code, msg } = res.data;
        if (code == SUCCESS) {
          if (msg == "队伍信息修改成功!") {
            ElMessage.success(msg);
            tmsgIsReadOnly.value = true;
          } else {
            ElMessage.error(msg);
          }
        } else {
          throw new Error(msg);
        }
      } catch (error) {
        ElMessage.error(error.message || "修改队伍信息失败");
      }
    } else {
      ElMessage.error("请重新检查是否有缺漏信息");
      console.log("表单校验未通过");
    }
  });
};

//解散队伍按钮
const disbandVisible = ref(false);
const disband = async () => {
  if (memberType.value === "0" || memberType.value === "1") {
    try {
      const res = await dismissTeam({
        tpId: team.value.tpId,
      });
      console.log(res);
      const { code, msg } = res.data;
      if (code == SUCCESS) {
        ElMessage.success("队伍解散成功");
        disbandVisible.value = false;
        loadPage();
        document.documentElement.scrollTop = 0;
      } else {
        ElMessage.error(msg);
      }
    } catch (error) {
      ElMessage.error(error.message || "获取教师信息失败");
    }
  } else {
    ElMessage.error("仅队长与指导老师可解散");
  }
};

/**
 * 队伍成员
 */
const options = [
  {
    value: "0",
    label: "指导老师",
  },
  {
    value: "1",
    label: "队伍队长",
  },
  {
    value: "2",
    label: "队伍成员",
  },
];
const membersForm = reactive([]);
watch(members, (newMembers) => {
  membersForm.splice(0, membersForm.length);
  if (newMembers.length > 0) {
    for (const member of newMembers) {
      membersForm.push({
        uid: member.uid,
        urealname: member.urealname,
        memberType: member.memberType,
        teamId: member.teamId,
      });
    }
  }
});
//添加表单规则
const addMembersForm = reactive({ info: [] });
const addMemberRef = ref();
const addMemberRules = {
  uid: [
    { required: true, message: "请输入学号/工号", trigger: "blur" },
    {
      pattern: /^[0-9]{12}$/,
      message: "学号/工号应为12位正整数",
      trigger: "blur",
    },
  ],
  urealname: [
    { required: true, message: "请输入真实姓名", trigger: "blur" },
    {
      pattern: /^[\u4e00-\u9fa5]+$/,
      message: "姓名应该为中文字符",
      trigger: "change",
    },
  ],
  memberType: [{ required: true, message: "请选择身份", trigger: "blur" }],
};

// 防抖
const debounce = (func) => {
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => func && func(args), 800);
  };
};
//添加按钮
const addMember = () => {
  if (memberType.value === "0" || memberType.value === "1") {
    addMembersForm.info.push({
      uid: "", //学号
      urealname: "", //姓名
      memberType: "", //身份
      teamId: team.value.tpId, //队伍ID
      queryHandler: debounce(fetchName),
    });
  } else {
    ElMessage.error("仅队长与指导老师可操作");
  }
};

// 自动获取姓名
const fetchName = async ([object, id]) => {
  console.log(id);
  try {
    const res = await getUsernameById(id);
    console.log(res);
    const { code, data, msg } = res.data;
    if (code != SUCCESS) {
      throw new Error(msg);
    }
    object.urealname = data || "";
  } catch (e) {
    ElMessage.error(e?.message || "获取姓名异常");
  }
};

//保存按钮：提交队员列表保存修改信息
const saveMembers = async () => {
  await addMemberRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await modifyTeamInfo(addMembersForm.info);
        console.log(res);
        const { code, msg } = res.data;
        if (code == SUCCESS) {
          ElMessage.success("修改成功");
          addMembersForm.info.splice(0, addMembersForm.info.length);
          loadPage();
        } else {
          ElMessage.error(msg);
          throw new Error(msg);
        }
      } catch (error) {
        ElMessage.error(error.message || "获取教师信息失败");
      }
    } else {
      ElMessage.error("信息输入格式有误，请重新检查");
      console.log("表单校验未通过");
    }
  });
};

//删除按钮（现有成员）
const deleMember = async (member) => {
  if (memberType.value === "0" || memberType.value === "1") {
    const res = await deleTeamMember(member);
    console.log(res);
    const { msg, code } = res.data;
    if (code == NO_CONTENT) {
      ElMessage.success(msg);
      loadPage();
    } else {
      ElMessage.error(msg);
    }
  } else {
    ElMessage.error("仅队长与指导老师可操作");
  }
};
//删除按钮（未保存的新添加成员）
const removeMember = (index) => {
  addMembersForm.info.splice(index, 1);
};

onMounted(() => {
  loadPage();
});

/**
 * TODO:
 * 每次添加删除之后刷新
 */
</script>
<template>
  <!--我的队伍-->
  <div v-if="team" class="team-main">
    <div class="team-name-box">
      <span class="team-name">团队：{{ team?.tpTeamName }}</span>
      <el-select
        v-model="currentTpIndex"
        class="m-2"
        placeholder="Select"
        style="width: 240px"
      >
        <el-option
          v-for="(n, index) in myTeamList"
          :key="index"
          :label="'队伍' + (index + 1) + ': ' + n.team.tpTeamName"
          :value="index"
        />
      </el-select>
    </div>
    <div class="member-msg-box">
      <div class="first-row">
        <h3 class="title">成员一览</h3>
        <span class="hello"
          >你好，{{
            memberType == "0"
              ? "指导老师"
              : memberType == "1"
              ? "队长"
              : memberType == "2"
              ? "队员"
              : ""
          }}{{ urealname }}</span
        >
      </div>
      <div class="member-msgs">
        <div class="member-msg" v-for="(member, index) in members" :key="index">
          <i class="iconfont icon-teamMembers"></i>
          <p class="member-position">
            {{
              member.memberType == "0"
                ? "指导老师"
                : member.memberType == "1"
                ? "队长"
                : member.memberType == "2"
                ? "队员"
                : ""
            }}
          </p>
          <p class="member-name">{{ member.urealname }}</p>
          <p class="member-uid">{{ member.uid }}</p>
        </div>
      </div>
    </div>
    <div class="apply-msg-box">
      <h3 class="title">队伍申请</h3>
      <!-- <div v-if="registrationList.length > 0">111</div> -->
      <ul
        class="content"
        v-if="registrationList && registrationList.length > 0"
      >
        <li
          class="content-item"
          v-for="(registration, index) in registrationList"
          :key="index"
        >
          <i class="iconfont icon-renyuan"> </i>
          <div class="apply-text-box" @click="getRegistration(index)">
            <p>来自</p>
            <p>
              {{ registration.riGrade }}级{{ registration.riMajor }}专业的{{
                registration.riRealname
              }}
            </p>
            <span class="details">详情>></span>
          </div>
          <div class="apply-button-box">
            <button
              class="pass"
              :disabled="isReadOnly"
              @click="isPassOrNot(registration.riId, true)"
            >
              <i class="iconfont icon-ai53"></i>通过
            </button>
            <button
              class="reject"
              :disabled="isReadOnly"
              @click="isPassOrNot(registration.riId, false)"
            >
              <i class="iconfont icon-shenqingbohui"></i>拒绝
            </button>
          </div>
        </li>
      </ul>
      <div v-else class="no-content-tip">暂无申请信息</div>
      <!-- 报名侧边抽屉 -->
      <el-drawer
        v-model="table"
        class="sign-box"
        title="详细信息"
        direction="ltr"
        size="50%"
      >
        <el-form class="sign-form">
          <el-row>
            <el-form-item label="学号：">{{
              registrantionDetail?.uid
            }}</el-form-item>
            <el-form-item label="姓名：">{{
              registrantionDetails?.riRealname
            }}</el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="年级："
              >{{ registrantionDetails?.riGrade }}级</el-form-item
            >
            <el-form-item label="专业：">{{
              registrantionDetails?.riMajor
            }}</el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="联系方式：" class="contact">{{
              registrantionDetails?.riContact
            }}</el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="个人简介：" class="personal-intro">{{
              registrantionDetails?.riIntro
            }}</el-form-item>
          </el-row>
        </el-form>
      </el-drawer>
    </div>

    <div class="team-msg-box">
      <h3 class="title">队伍信息</h3>
      <div class="team-msg-content">
        <el-form
          class="team-msg-form"
          ref="teamFormRef"
          :model="teamForm"
          :rules="teamMsgRules"
        >
          <el-row>
            <el-form-item label="团队ID :" prop="tpId">
              <el-input :disabled="true" v-model="teamForm.tpId"></el-input>
            </el-form-item>
            <el-form-item label="团队名称 :" prop="tpTeamName">
              <el-input
                :disabled="tmsgIsReadOnly"
                v-model="teamForm.tpTeamName"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="赛事名称 :" prop="tpProjectName">
              <el-input
                :disabled="true"
                v-model="teamForm.tpProjectName"
              ></el-input>
            </el-form-item>
            <el-form-item label="截止招募 :" prop="tpRegistrationDeadline">
              <el-date-picker
                :disabled="tmsgIsReadOnly"
                v-model="teamForm.tpRegistrationDeadline"
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="队伍规模 :" class="team-scale">
              <el-form-item label="教师 :" prop="tpTeacherNumber">
                <el-input-number
                  :disabled="tmsgIsReadOnly"
                  v-model="teamForm.tpTeacherNumber"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="学生总计 :" prop="tpNeedStudentNumber">
                <el-input-number
                  :disabled="tmsgIsReadOnly"
                  v-model="teamForm.tpNeedStudentNumber"
                ></el-input-number>
              </el-form-item>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="联系方式 :" prop="tpContact">
              <el-input
                :disabled="tmsgIsReadOnly"
                v-model="teamForm.tpContact"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-form-item class="text-area" label="队伍简介 :" prop="tpTeamIntro">
            <el-input
              class="text-area-input"
              type="textarea"
              :rows="6"
              :disabled="tmsgIsReadOnly"
              v-model="teamForm.tpTeamIntro"
            ></el-input>
          </el-form-item>

          <el-form-item
            class="text-area"
            label="能力需求 :"
            prop="tpAbilityNeed"
          >
            <el-input
              class="text-area-input"
              type="textarea"
              :rows="6"
              :disabled="tmsgIsReadOnly"
              v-model="teamForm.tpAbilityNeed"
            ></el-input>
          </el-form-item>

          <el-row class="tmessage-button-box">
            <el-button
              class="tmessage-button"
              @click="updateTeamMsgForm"
              :disabled="isReadOnly"
              >修改信息</el-button
            >
            <el-button
              class="tmessage-button"
              type="primary"
              @click="commitTeamMsgForm"
              :disabled="isReadOnly"
              >保存修改</el-button
            >
            <el-button
              class="disband-button"
              :disabled="isReadOnly"
              @click="disbandVisible = true"
              >解散队伍</el-button
            >
            <el-dialog v-model="disbandVisible" title="提示" width="30%">
              <span>您确定要解散当前队伍吗？</span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="disbandVisible = false">取消</el-button>
                  <el-button type="primary" @click="disband"> 确定 </el-button>
                </span>
              </template>
            </el-dialog>
          </el-row>
        </el-form>
      </div>
    </div>

    <div class="team-members-box">
      <div class="title-box">
        <h3 class="title">队伍成员</h3>
        <el-popover
          :width="300"
          placement="right"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
        >
          <template #reference>
            <i class="iconfont icon-bangzhu" />
          </template>
          <template #default>
            <div
              class="demo-rich-conent"
              style="display: flex; gap: 16px; flex-direction: column"
            >
              <p
                class="demo-rich-content__name"
                style="margin: 0; font-weight: 600"
              >
                填写说明
              </p>
              <p class="demo-rich-content__desc" style="margin: 0">
                添加队员信息后请点击保存按钮。
              </p>
            </div>
          </template>
        </el-popover>
      </div>
      <div class="member-content">
        <div class="tmember-button-box">
          <el-button
            @click="addMember"
            class="tmember-button"
            type="primary"
            :disabled="isReadOnly"
            plain
            >添加</el-button
          >
          <el-button
            @click="saveMembers"
            class="tmember-button"
            type="primary"
            :disabled="isReadOnly"
            plain
            >保存</el-button
          >
        </div>
        <div class="form-box">
          <el-form class="team-members-form" :model="membersForm">
            <el-form-item class="current-team-members">
              <el-row
                v-for="(member, index) in membersForm"
                :key="index"
                :gutter="20"
              >
                <el-col :span="8">
                  <el-form-item label="学号/工号: ">
                    <el-input disabled v-model="member.uid"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="姓名: ">
                    <el-input disabled v-model="member.urealname">{{
                      member.urealname
                    }}</el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="身份: ">
                    <el-select disabled v-model="member.memberType">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item>
                    <el-button
                      class="iconfont icon-shanchu"
                      :disabled="isReadOnly"
                      @click="deleMember(member)"
                      >删除</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <el-form
            ref="addMemberRef"
            :model="addMembersForm"
            :rules="addMemberRules"
          >
            <el-row
              v-for="(member, index) in addMembersForm.info"
              :key="index"
              :gutter="20"
            >
              <el-col :span="8">
                <el-form-item
                  label="学号/工号: "
                  :prop="`info[${index}].uid`"
                  :rules="addMemberRules.uid"
                >
                  <el-input
                    v-model="member.uid"
                    @input="member.queryHandler(member, member.uid)"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="姓名: "
                  :prop="`info[${index}].urealname`"
                  :rules="addMemberRules.urealname"
                >
                  <el-input v-model="member.urealname"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="身份: "
                  :prop="`info[${index}].memberType`"
                  :rules="addMemberRules.memberType"
                >
                  <el-select v-model="member.memberType">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-button
                    class="iconfont icon-shanchu"
                    :disabled="isReadOnly"
                    @click="removeMember(index)"
                    >删除</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
  <!-- <div v-else class="warning">您还未加入任何队伍</div>
   -->
  <el-empty class="warning" v-else description="您还未加入任何队伍" />
</template>

<style scoped lang="less">
.team-main {
  height: auto;
  width: 950px;
  //团队名称及队伍选择首行共同1
  .team-name-box {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    .team-name {
      font-size: 25px;
      color: #5098a8;
      font-weight: bold;
      margin-right: 30px;
      font-family: "黑体";
    }
    .el-select {
      font-size: 18px;
      padding: 5px;
    }
  }
  //团队成员盒子
  .member-msg-box {
    margin-top: 20px;
    .first-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .hello {
        font-size: 16px;
        margin-right: 10px;
        font-family: "黑体";
      }
    }
    .member-msgs {
      padding: 40px 10px;
      display: flex;
      flex-direction: row;
      .member-msg {
        width: 110px;
        margin-right: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon-teamMembers {
          font-size: 60px;
          margin-bottom: 5px;
        }
        .member-ship {
          font-size: 15px;
          margin-top: 2px;
        }
        .member-name {
          font-size: 18px;
          font-weight: bold;
          margin: 2px 0px;
        }
        .member-uid,
        .member-position {
          font-size: 15px;
          color: #838282;
          font-family: "黑体";
        }
      }
    }
  }
  //队伍申请盒子
  .apply-msg-box {
    .no-content-tip {
      font-size: 16px;
      margin-top: 10px;
      color: #959595;
    }
    .content {
      width: 100%;
      margin-top: 10px;

      .content-item {
        display: grid;
        grid-template-columns: 120px 550px 100px;
        border-bottom: 1px solid gray;
        padding: 20px 10px;
        .icon-renyuan {
          font-size: 70px;
          color: #a06900;
        }
        .apply-text-box {
          font-size: 18px;
          margin-top: 2px;
          // margin-left: -200px;
          .details {
            color: #959595;
            font-size: 14px;
            margin-top: 10px;
          }
        }
        .apply-button-box {
          margin-left: 150px;
          display: flex;
          flex-direction: column;
          .pass,
          .reject {
            width: 80px;
            height: 30px;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 5px;
          }
        }
      }
    }
    // 报名弹窗
    .sign-box {
      .sign-form {
        width: 95%;
        .el-row {
          display: flex;
          justify-content: center;
          .el-form-item {
            width: 45%;
            margin-right: 5%;
          }
          .el-form-item:last-child {
            margin-right: 0;
          }
          .contact,
          .personal-intro {
            width: 95%;
          }
          .button {
            width: auto;
            margin-top: 2%;
          }
        }
      }
    }
  }
  //队伍信息管理盒子
  .team-msg-box {
    margin-top: 40px;
    margin-bottom: 20px;
    .team-msg-content {
      margin-top: 30px;
      background-color: white;
      padding: 40px 30px 50px 50px;
      .team-msg-form {
        width: 100%;
        .el-form-item {
          width: 50%;
          .el-input {
            width: 90%;
          }
          .el-input-number {
            width: 80%;
          }
        }
        .team-scale {
          width: 70%;
          .el-form-item {
            width: 40%;
          }
          .el-input-number {
            width: 120px;
          }
        }
        .text-area {
          width: 100%;
          .text-area-input {
            width: 95%;
          }
        }

        .tmessage-button-box {
          width: 95%;
          display: flex;
          justify-content: center;
          margin-top: 10px;
          .tmessage-button {
            width: 200px;
          }
          .tmessage-button:last-of-type {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .team-members-box {
    .title-box {
      display: flex;
      align-items: center;
      .icon-bangzhu {
        margin-top: 3px;
        font-size: 18px;
        margin-left: 8px;
        color: #369afe;
      }
    }
    .member-content {
      margin-top: 30px;
      background-color: white;
      padding: 30px 30px 30px 50px;
      display: grid;
      grid-template-columns: 90px auto;
      .tmember-button-box {
        border-right: 2px solid #e8ebf0;
        margin-right: 10px;
        .tmember-button {
          margin: 0px;
        }
        .tmember-button:nth-last-of-type(1) {
          margin-top: 10px;
        }
      }
      .current-team-members {
        width: 100%;
        .el-row {
          margin-bottom: 10px;
        }
      }
    }
  }
}
.warning {
  margin: 0px auto;
}
.title {
  font-size: 24px;
  position: relative;
}
.title:before {
  content: "";
  background-color: #1e9ab5;
  width: 6px;
  height: 22px;
  position: absolute;
  left: -15px;
  margin-top: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
</style>